<template>
  <div class="music-list">
    <div class="back" @click="goBack">
      <i class="icon-back"></i>
    </div>
    <h1 class="title">{{ title }}</h1>
    <div
      class="bg-image"
      :style="bgImageStyle"
      ref="bgImage"
    >
      <div class="play-btn-wrapper" :style="playBtnStyle">
        <div
          v-show="songs.length > 0"
          class="play-btn"
          @click="random"
        >
          <i class="icon-play"></i>
          <span class="text">随机播放全部</span>
        </div>
      </div>
      <div class="filter" :style="filterStyle"></div>
    </div>
    <scroll
      class="list"
      :style="scrollStyle"
      v-loading="loading"
      v-no-result="noResult"
      :probe-type="3"
      @scroll="onScroll"
    >
      <div class="song-list-wrapper">
        <song-list :songs="songs" @select="selectItem"></song-list>
      </div>
    </scroll>
  </div>
</template>

<script setup>
  import Scroll from '@/components/base/scroll/scroll.vue'
  import SongList from '@/components/base/song-list/song-list'
  import { computed, defineProps, onMounted, ref } from 'vue'
  import { useRouter } from 'vue-router'
  import { useStore } from 'vuex'

  const RESERVED_HEIGHT = 40
  const imageHeight = ref(0)
  const bgImage = ref(null)
  const scrollY = ref(0)
  const maxTranslateY = ref(0)
  const router = useRouter()
  const store = useStore()

  const props = defineProps({
    songs: {
      type: Array,
      default() {
        return []
      }
    },
    title: String,
    pic: String,
    loading: Boolean
  })

  const noResult = computed(() => {
    return !props.loading && !props.songs.length
  })
  const bgImageStyle = computed(() => {
    const y = scrollY.value
    let zIndex = 0
    let paddingTop = '70%'
    let height = 0
    let translateZ = 0 // 针对ISO设备在absolute定位的时候z-index显示不对的坑，增加translateZ

    if (y > maxTranslateY.value) {
      zIndex = 10
      paddingTop = 0
      height = `${RESERVED_HEIGHT}px`
      translateZ = 1
    }

    let scale = 1
    if (y < 0) {
      scale = 1 + Math.abs(y / imageHeight.value)
    }

    return {
      zIndex,
      paddingTop,
      height,
      backgroundImage: `url(${props.pic})`,
      transform: `scale(${scale})translateZ(${translateZ}px)`
    }
  })
  const scrollStyle = computed(() => {
    return {
      top: `${imageHeight.value}px`
    }
  })
  const filterStyle = computed(() => {
    let blur = 0
    const y = scrollY.value
    const imgHeight = imageHeight.value
    const maxY = maxTranslateY.value
    if (y >= 0) {
      blur = Math.min(maxY / imgHeight, y / imgHeight) * 20
    }
    return {
      backdropFilter: `blur(${blur}px)`
    }
  })
  const playBtnStyle = computed(() => {
    let display = ''
    if (scrollY.value >= maxTranslateY.value) {
      display = 'none'
    }
    return {
      display
    }
  })

  onMounted(() => {
    imageHeight.value = bgImage.value.clientHeight
    maxTranslateY.value = imageHeight.value - RESERVED_HEIGHT
  })

  const selectItem = ({ song, index }) => {
    store.dispatch('selectPlay', {
      list: props.songs,
      index
    })
  }

  const random = () => {
    store.dispatch(('randomPlay'), props.songs)
  }

  const goBack = () => {
    router.back()
  }

  const onScroll = (pos) => {
    scrollY.value = -pos.y
  }
</script>

<style scoped lang="scss">
  .music-list {
    position: relative;
    height: 100%;
    .back {
      position: absolute;
      top: 0;
      left: 6px;
      z-index: 20;
      transform: translateZ(2px);
      .icon-back {
        display: block;
        padding: 10px;
        font-size: $font-size-large-x;
        color: $color-theme;
      }
    }
    .title {
      position: absolute;
      top: 0;
      left: 10%;
      width: 80%;
      z-index: 20;
      transform: translateZ(2px);
      @include no-wrap();
      text-align: center;
      line-height: 40px;
      font-size: $font-size-large;
      color: $color-text;
    }
    .bg-image {
      position: relative;
      width: 100%;
      transform-origin: top;
      background-size: cover;
      .play-btn-wrapper {
        position: absolute;
        bottom: 20px;
        z-index: 10;
        width: 100%;
        .play-btn {
          box-sizing: border-box;
          width: 135px;
          padding: 7px 0;
          margin: 0 auto;
          text-align: center;
          border: 1px solid $color-theme;
          color: $color-theme;
          border-radius: 100px;
          font-size: 0;
        }
        .icon-play {
          display: inline-block;
          vertical-align: middle;
          margin-right: 6px;
          font-size: $font-size-medium-x;
        }
        .text {
          display: inline-block;
          vertical-align: middle;
          font-size: $font-size-small;
        }
      }
      .filter {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(7, 17, 27, 0.4);
      }
    }
    .list {
      position: absolute;
      bottom: 0;
      width: 100%;
      z-index: 0;
      .song-list-wrapper {
        padding: 20px 30px;
        background: $color-background;
      }
    }
  }
</style>
